<template>
    <view class="page">
        <!-- banner -->
        <view class="banner">
            <swiper class="screen-swiper round-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
                <swiper-item v-for="(item, index) in swiperList" :key="index">
                    <image :src="item.url" mode="widthFix"></image>
                    <!-- <video src="{{item.url}}" autoplay loop muted show-play-btn="{{false}}" controls="{{false}}" objectFit="cover" wx:if="{{item.type=='video'}}"></video> -->
                </swiper-item>
            </swiper>
        </view>
        <!-- 文章内容 -->
        <view class="article-data">
            <view class="article-title">
                <text>我的快充秘诀-爱国者充电宝</text>
            </view>
            <view class="article-content">
                <text>入手这款充电宝，是真的好，真的好，真的好，真的好，真的好，真的好，真的好，真的好，真的好，真的好</text>
            </view>
        </view>
        <!-- 猜你喜欢 -->
        <view class="guess-like">
            <view class="guess-like-title">
                <text class="line"></text>
                <text>猜你喜欢</text>
            </view>
            <view class="article-list">
                <view class="box-wrapper">
                    <view class="list">
                        <view class="thumb">
                            <image src="http://img0.imgtn.bdimg.com/it/u=791178039,1753704237&fm=26&gp=0.jpg" mode="widthFix"></image>
                        </view>
                        <view class="title">
                            <text>安利一款笔记本电脑啊，非常好用</text>
                        </view>
                        <view class="like">
                            <text class="iconfont icon-guanzhu"></text>
                            <text>100</text>
                        </view>
                    </view>
                    <view class="list">
                        <view class="thumb">
                            <image src="http://img2.imgtn.bdimg.com/it/u=147264006,1706829998&fm=26&gp=0.jpg" mode="widthFix"></image>
                        </view>
                        <view class="title">
                            <text>安利一款笔记本电脑啊，非常好用</text>
                        </view>
                        <view class="like">
                            <text class="iconfont icon-guanzhu"></text>
                            <text>100</text>
                        </view>
                    </view>
                    <view class="list">
                        <view class="thumb">
                            <image src="http://img0.imgtn.bdimg.com/it/u=791178039,1753704237&fm=26&gp=0.jpg" mode="widthFix"></image>
                        </view>
                        <view class="title">
                            <text>安利一款笔记本电脑啊，非常好用</text>
                        </view>
                        <view class="like">
                            <text class="iconfont icon-guanzhu"></text>
                            <text>100</text>
                        </view>
                    </view>
                    <view class="list">
                        <view class="thumb">
                            <image src="http://img0.imgtn.bdimg.com/it/u=791178039,1753704237&fm=26&gp=0.jpg" mode="widthFix"></image>
                        </view>
                        <view class="title">
                            <text>安利一款笔记本电脑啊，非常好用</text>
                        </view>
                        <view class="like">
                            <text class="iconfont icon-guanzhu"></text>
                            <text>100</text>
                        </view>
                    </view>
                    <view class="list">
                        <view class="thumb">
                            <image src="http://img0.imgtn.bdimg.com/it/u=791178039,1753704237&fm=26&gp=0.jpg" mode="widthFix"></image>
                        </view>
                        <view class="title">
                            <text>安利一款笔记本电脑啊，非常好用</text>
                        </view>
                        <view class="like">
                            <text class="iconfont icon-guanzhu"></text>
                            <text>100</text>
                        </view>
                    </view>
                    <view class="list">
                        <view class="thumb">
                            <image src="http://img0.imgtn.bdimg.com/it/u=791178039,1753704237&fm=26&gp=0.jpg" mode="widthFix"></image>
                        </view>
                        <view class="title">
                            <text>安利一款笔记本电脑啊，非常好用</text>
                        </view>
                        <view class="like">
                            <text class="iconfont icon-guanzhu"></text>
                            <text>100</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部 -->
        <view class="article-footer">
            <view class="footer-left">
                <view class="list" @click="isComment = true">
                    <text class="iconfont icon-xiaoxi"></text>
                </view>
                <view class="list">
                    <text class="iconfont icon-guanzhu"></text>
                </view>
            </view>
            <view class="footer-right" @click="isGoods = true">
                <text>买同款（1）</text>
            </view>
        </view>
        <!-- 评论弹窗 -->
        <view class="cu-modal bottom-modal comment-win" :class="{'show':isComment}" @click="isComment = false">
            <view class="cu-dialog">
                <view class="comment-title">
                    <view class="title">
                        <text class="iconfont icon-xiaoxi"></text>
                        <text>全部评论(3)</text>
                    </view>
                </view>
                <view class="comment-list">
                    <view class="list" v-for="(item,index) in 10" :key="index">
                        <view class="portrait">
                            <image src="/static/img/user_pic.jpg" mode="widthFix"></image>
                        </view>
                        <view class="item">
                            <view class="title">
                                <view class="name-date">
                                    <view class="name">
                                        <text>哈哈哈哈</text>
                                    </view>
                                    <view class="date">
                                        <text>12月27日</text>
                                    </view>
                                </view>
                                <view class="praise">
                                    <text>赞</text>
                                    <text class="iconfont icon-zan"></text>
                                </view>
                            </view>
                            <view class="content">
                                <text>这个真好，这个不错，购买来试一下看看！！</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="comment-input">
                    <view class="comment">
                        <input type="text" placeholder="写写你的看法吧">
                    </view>
                    <view class="send">
                        <text>发送</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 商品弹窗 -->
        <view class="cu-modal bottom-modal goods-win" :class="{'show':isGoods}" @click="isGoods = false">
            <view class="cu-dialog">
                <view class="goods-title">
                    <view class="title">2个商品</view>
                </view>
                <view class="goods-list">
                    <view class="list" v-for="(item,index) in 2" :key="index">
                        <view class="thumb">
                            <image src="http://img0.imgtn.bdimg.com/it/u=791178039,1753704237&fm=26&gp=0.jpg" mode=""></image>
                        </view>
                        <view class="item">
                            <view class="title">
                                <text class="two-omit">爱国者充电宝 4000毫安快速充电 安全稳定 动感灯光 全新上市</text>
                            </view>
                            <view class="price-look">
                                <view class="price">
                                    <text>￥167.00</text>
                                </view>
                                <view class="look">
                                    <text>去看看&gt;</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            swiperList: [
                {
                    id: 0,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                },
                {
                    id: 1,
                    type: 'image',
                    url: '/static/img/banner_02.png'
                },
                {
                    id: 2,
                    type: 'image',
                    url: '/static/img/banner_03.png'
                },
                {
                    id: 3,
                    type: 'image',
                    url: '/static/img/banner_04.png'
                },
                {
                    id: 4,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                },
                {
                    id: 5,
                    type: 'image',
                    url: '/static/img/banner_01.png'
                }
            ],
            isComment: false,
            isGoods: false,
        };
    }
}
</script>

<style scoped lang="scss">
.page {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

/* banner */
.banner {
    width: 100%;
    .screen-swiper {
        width: 100%;
        height: 400rpx;
        image {
            width: 100%;
            height: 100%;
        }
    }
}

/* 文章数据 */
.article-data {
    padding: 0 4%;
    margin: 20rpx auto;
    .article-title {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100rpx;
        text {
            font-size: 32rpx;
            font-weight: bold;
            color: #222222;
        }
    }
    .article-content {
        width: 100%;
        text {
            font-size: 28rpx;
            color: #555555;
        }
    }
}

/* 猜你喜欢 */
.guess-like {
    width: 100%;
    background-color: #ffffff;
    border-top: 10rpx solid #f6f6f6;
    .guess-like-title {
        position: relative;
        display: flex;
        align-items: center;
        padding: 0 4%;
        height: 80rpx;
        text {
            font-size: 30rpx;
            color: #222222;
        }
        .line {
            position: absolute;
            left: 15rpx;
            top: 50%;
            width: 7rpx;
            height: 30rpx;
            background-color: $base;
            border-radius: 20rpx;
            transform: translate(0, -50%);
        }
    }
    .article-list {
        padding: 0 4%;
        .box-wrapper {
            -moz-column-count: 2;
            /* Firefox */
            -webkit-column-count: 2;
            /* Safari 和 Chrome */
            column-count: 2;
            -moz-column-gap: 0.5em;
            -webkit-column-gap: 0.5em;
            column-gap: 0.5em;
        }
        .list {
            margin-top: 1em;
            -moz-page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.3);
            border-radius: 20rpx;
            overflow: hidden;
            .thumb {
                width: 100%;
                image {
                    width: 100%;
                }
            }
            .title {
                padding: 20rpx;
                text {
                    font-size: 28rpx;
                    color: #222222;
                }
            }
            .like {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding: 0 20rpx;
                height: 60rpx;
                text {
                    font-size: 24rpx;
                    color: #222222;
                }
                .iconfont {
                    color: #c0c0c0;
                    font-size: 32rpx;
                    margin-right: 10rpx;
                }
            }
        }
    }
}

/* 底部 */
.article-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 120rpx;
    padding: 0 4%;
    .footer-left {
        display: flex;
        width: 30%;
        height: 80rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 80rpx;
        .list {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 50%;
            height: 100%;
            text {
                font-size: 38rpx;
                color: #ffffff;
            }
        }
    }
    .footer-right {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40%;
        height: 80rpx;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 80rpx;
        text {
            font-size: 28rpx;
            color: #ffffff;
        }
    }
}

/* 评论弹窗 */
.comment-win {
    .cu-dialog {
        width: 100%;
        height: 70%;
        border-radius: 20rpx 20rpx 0 0 !important;
        .comment-title {
            display: flex;
            align-items: center;
            padding: 0 4%;
            height: 100rpx;
            .title {
                display: flex;
                align-items: center;
                text {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #222222;
                }
                .iconfont {
                    font-size: 34rpx;
                    color: $base;
                    margin-right: 10rpx;
                }
            }
        }
        .comment-list {
            padding: 0 4%;
            height: 80%;
            padding-bottom: 50rpx;
            overflow: auto;
            .list {
                display: flex;
                width: 100%;
                margin-bottom: 20rpx;
                .portrait {
                    width: 15%;
                    height: 100%;
                    image {
                        width: 60rpx;
                        height: 60rpx;
                        border-radius: 100%;
                    }
                }
                .item {
                    width: 85%;
                    height: 100%;
                    .title {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        width: 100%;
                        height: 100rpx;
                        .name-date {
                            display: flex;
                            flex-direction: column;

                            height: 100%;
                            .name {
                                font-size: 26rpx;
                                font-weight: bold;
                                color: #222222;
                            }
                            .date {
                                font-size: 24rpx;
                                color: #959595;
                            }
                        }
                        .praise {
                            display: flex;
                            align-items: center;
                            text {
                                font-size: 28rpx;
                                color: #c0c0c0;
                            }
                            .iconfont {
                                font-size: 32rpx;
                                margin-left: 10rpx;
                            }
                        }
                    }
                    .content {
                        width: 100%;
                        padding: 10rpx 0;
                        text {
                            font-size: 28rpx;
                            color: #959595;
                        }
                    }
                }
            }
        }
        .comment-input {
            position: absolute;
            left: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            width: 100%;
            height: 100rpx;
            background-color: #ffffff;
            padding: 0 4%;
            .comment {
                display: flex;
                align-items: center;
                width: 80%;
                height: 60rpx;
                background-color: #eeeeee;
                border-radius: 60rpx;
                input {
                    width: 100%;
                    height: 100%;
                    color: #222222;
                    font-size: 26rpx;
                }
            }
            .send {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 20%;
                height: 60rpx;
                text {
                    color: $base;
                    font-size: 30rpx;
                }
            }
        }
    }
}

.goods-win {
    .cu-dialog {
        width: 100%;
        height: 70%;
        border-radius: 20rpx 20rpx 0 0 !important;
    }
    .goods-title {
        display: flex;
        align-items: center;
        padding: 0 4%;
        height: 100rpx;
        .title {
            font-size: 28rpx;
            color: #222222;
        }
    }
    .goods-list {
        padding: 0 4%;
        .list {
            display: flex;
            align-items: center;
            width: 100%;
            height: 200rpx;
            background-color: #ffffff;
            box-shadow: 0 0 20rpx #f6f6f6;
            border-radius: 10rpx;
            overflow: hidden;
            margin-bottom: 20rpx;
            .thumb {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30%;
                height: 200rpx;
                image {
                    width: 170rpx;
                    height: 170rpx;
                    border-radius: 10rpx;
                }
            }
            .item {
                width: 70%;
                height: 100%;
                .title {
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 100rpx;
                    text {
                        color: #222222;
                        font-size: 26rpx;
                        text-align: left;
                    }
                }
                .price-look {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    width: 100%;
                    height: 100rpx;
                    .price {
                        font-size: 32rpx;
                        color: $base;
                    }
                    .look {
                        display: flex;
                        align-items: center;
                        margin-right: 20rpx;
                        text {
                            padding: 4rpx 10rpx;
                            border: 2rpx solid #555555;
                            color: #555555;
                            font-size: 24rpx;
                            border-radius: 60rpx;
                        }
                    }
                }
            }
        }
    }
}
</style>
